<template>
  <div class="container">

    <!-- 输入框 -->
    <span style="font-size: 14px;margin-right: 20px">姓名</span>
    <el-input prefix-icon="el-icon-search" placeholder="请输入内容" style="width: 200px;margin-right: 20px"/>
    <!-- 日期选择器 -->
    <span style="font-size: 14px;margin-right: 20px">日期</span>
    <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="margin-right: 20px"
    >
    </el-date-picker>
    <!-- 搜索 -->
    <el-button type="primary">搜索</el-button>
    <!-- 添加 -->
    <el-button type="success" @click="handleAdd">添加</el-button>

    <!-- 分割线 -->
    <el-divider/>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <!-- 序号 -->
      <el-table-column
        label="序号"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 日期 -->
      <el-table-column
        label="日期"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <!-- 姓名 -->
      <el-table-column
        label="姓名"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <!-- 图片 -->
      <el-table-column
        label="图片"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imgSrc"
            :preview-src-list="[scope.row.imgSrc]"
          />
        </template>
      </el-table-column>
      <!-- 地址 -->
      <el-table-column
        label="地址"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        label="状态"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" @click.native="stateHandle(scope)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单对话框 -->
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleEnter">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      // 日期
      date: '',
      // 添加或者更新标志位
      addOrUpdate: false,
      // 表格数据
      tableData: [{
        date: '2016-05-02',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        // 图片链接
        imgSrc: 'http://hbimg.huaban.com/721b4d61c61c894e9332328c068fb304ac11462734ecd-lYrUkT',
        state: true
      }, {
        date: '2016-05-04',
        name: '李四',
        address: '上海市普陀区金沙江路 1517 弄',
        // 图片链接
        imgSrc: 'https://pica.zhimg.com/v2-88eafe46d59680cdc67b9f0ae2a49256_r.jpg?source=1940ef5c',
        state: true
      }, {
        date: '2016-05-01',
        name: '王五',
        address: '上海市普陀区金沙江路 1519 弄',
        // 图片链接
        imgSrc: 'https://img.win3000.com/m00/55/f3/2daaa5e8680fd0f0d106c3321abd1c66.jpg?down',
        state: true
      }, {
        date: '2016-05-03',
        name: '老六',
        address: '上海市普陀区金沙江路 1516 弄',
        // 图片链接
        imgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpinkehao.com%2Fwp-content%2Fuploads%2F2021%2F10%2F2d7f7b389da7484d82d09322109ad692.jpg&refer=http%3A%2F%2Fpinkehao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645605666&t=e9fcd897a97c59540c60ccc8c9b86ab3',
        state: true
      }],
      // 对话框标志位
      dialogFormVisible: false,
      // 对话框表单数据
      form: {
        // 姓名
        name: '',
        // 日期
        date: '',
        // 地址
        address: '',
        // 下标
        index: ''
      },
      // 表单标签宽度
      formLabelWidth: '40px',
      // 表单标题
      formTitle: '1'
    }
  },
  methods: {
    // 确定
    handleEnter() {
      if (this.addOrUpdate) {
        console.log('添加数据')
        // 添加表格数据
        this.tableData.push({
          date: this.form.date,
          name: this.form.name,
          address: this.form.address
        })
        this.$message({
          message: '添加成功！',
          type: 'success'
        })
      } else {
        // 更新表格数据
        this.tableData[this.form.index].name = this.form.name
        this.tableData[this.form.index].date = this.form.date
        this.tableData[this.form.index].address = this.form.address
        this.$message({
          message: '更新成功！',
          type: 'success'
        })
      }
      // 重置表单
      this.reset()
      // 隐藏对话框
      this.dialogFormVisible = false
    },
    // 取消
    handleCancel() {
      console.log('取消')
      // 重置表单
      this.reset()
      // 显示表单对话窗
      this.dialogFormVisible = false
    },
    // 添加
    handleAdd() {
      // 重置表单
      this.reset()
      // 更新标题
      this.formTitle = '添加数据'
      // 显示弹窗
      this.dialogFormVisible = true
      // 更新标志位
      this.addOrUpdate = true
    },
    // 编辑
    handleEdit(scope) {
      // 更新标题
      this.formTitle = '编辑数据'
      // 回显数据
      this.form.name = scope.row.name
      this.form.date = scope.row.date
      this.form.address = scope.row.address
      this.form.index = scope.$index
      // 显示对话框
      this.dialogFormVisible = true
      // 更新标志位
      this.addOrUpdate = false
      // 打印数据
      console.log(scope)
    },
    // 删除
    handleDelete(scope) {
      this.tableData.splice(scope.$index, 1)
      this.$message({
        message: '删除成功！',
        type: 'success'
      })
    },
    // 表单重置
    reset() {
      this.form = {
        // 姓名
        name: '',
        // 日期
        date: '',
        // 地址
        address: '',
        // 下标
        index: ''
      }
    },
    // 状态更改对话框
    stateHandle(scope) {
      // 调用ElementUi的confirm
      this.$confirm(scope.row.state ? '是否启用状态？' : '是否禁用状态？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认
        this.tableData[scope.$index].state = scope.row.state
      }).catch(() => {
        // 取消
        this.tableData[scope.$index].state = !scope.row.state
      })
    }
  }
}

</script>

<style scoped>

.container {
  padding: 30px;
  box-sizing: border-box;
}

</style>
